<script setup>
import { onMounted, ref, watch } from 'vue';
import { getBarFn, getRecommendTopFn, getRecommendFn, getHotFn, getHomeBarVideoFn } from '@/api/homeAPI'
import RecommendContentCom from '@/components/home/HomeContentCom.vue';
import { useUserStore } from '@/stores/user';

const value = ref('月球背面照片')
const active = ref(1)
const bars = ref([])
const loginBox = ref()
const top_news = ref([])
const content = ref([])
const user = useUserStore()
const showShare = ref(false)
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
]
const show = ref(false)


onMounted(() => {
    getBarFn().then(res => {
        if (res.code === '200') {
            bars.value = res.data
        }
    })
})


watch(active, (newVal) => {
    if (newVal === 0) {

    } else if (newVal === 1) {

        getRecommendTopFn().then(res => {
            if (res.code === '200') {
                top_news.value = res.data
            }
        })
        getRecommendFn().then(res => {
            if (res.code === '200') {
                content.value = res.data

            }
        })
    } else if (newVal === 2) {
        getHotFn().then(res => {
            if (res.code === '200') {
                content.value = res.data
            }
        })
    } else if (newVal === 3) {
        getHomeBarVideoFn().then(res => {
            if (res.code === '200') {
                content.value = res.data
            }
        })
    }
},
    {
        immediate: true
    }
)


// 关闭登录提示
function closeLoginBox() {
    loginBox.value.style.display = 'none'
}


function shareClick() {
    showShare.value = true
}


</script>
<template>
    <div id="box">
        <van-search show-action v-model="value" @focus="$router.push('/search')" shape="round" background="#FF644D"
            placeholder="请输入搜索关键词">
            <template #action>
                <span @click="show = true"
                    style="display: flex;color: white;padding: 0.04rem;background-color: rgba(0, 0, 0, 0.15);border-radius: 50%;user-select: none;"><van-icon
                        size="0.26rem" name="add-o" /></span>
            </template>
        </van-search>
        <div class="top_bar_box">
            <van-tabs v-model:active="active">
                <van-tab v-for="con in bars" :title="con.text"
                    :disabled="(con.text != '推荐' && con.text != '热榜' && con.text != '视频') || (!user.isLogin && con.text != '推荐')" />
            </van-tabs>
        </div>
        <main>
            <div class="login_box" ref="loginBox" v-if="!user.isLogin">
                <div class="left_text">一键登录，推荐内容更精彩~</div>
                <div class="right_btn">
                    <van-button plain type="primary" round @click="$router.push('/bottomLogin')">登录</van-button>
                    <van-icon name="cross" @click="closeLoginBox" />
                </div>
            </div>
            <div class="top_news_box" v-show="active === 1">
                <div class="top_news" v-for="i in top_news" :key="i.id">
                    <div class="top_news_title van-ellipsis">{{ i.title }}</div>
                    <div class="top_news_bottom">
                        <div class="tag">置顶</div>
                        <div class="top_news_auther">{{ i.auther }}</div>
                        <div class="top_news_commit">{{ i.commit }}</div>
                        <div class="top_news_time">{{ i.time }}</div>
                    </div>
                </div>
            </div>
            <div class="content_box">
                <RecommendContentCom @share="shareClick" :content="content" />
            </div>
        </main>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
        <van-action-sheet v-model:show="show">
            <section>

                <div class="cancelAddContentBtn" @click="show = false">
                    <img class="icon" src="/icon_home/minus.png" alt="">
                </div>
                <div class="addContent">
                    <div class="add_title">
                        <van-icon size="0.26rem" name="/icon_home/bug.png" />
                        张三的歌，一起发现更精彩的世界吧~
                    </div>
                    <div class="add">
                        <div class="add1">
                            <div class="add_con">
                                <div class="add1_title">发个动态&nbsp;&gt;</div>
                                <div class="add1_text">有什么新鲜事说说看</div>
                            </div>
                            <van-icon size="0.44rem" name="/icon_home/10001.svg" />
                        </div>
                        <div class="add2">
                            <div class="add_con">
                                <div class="add2_title">热门话题&nbsp;&gt;</div>
                                <div class="add2_text">为你推荐创作的灵感</div>
                            </div>
                            <van-icon size="0.44rem" name="/icon_home/10002.svg" />
                        </div>

                    </div>
                    <div class="add_article_video">
                        <div class="article">
                            <van-icon size="0.24rem" name="/icon_home/wenzhang.png" />
                            写文章
                        </div>
                        <div class="border"></div>
                        <div class="video">
                            <van-icon size="0.24rem" name="/icon_home/shipin.png" />发视频
                        </div>
                    </div>
                    <div class="draft">
                        <div class="draft_left">
                            <van-icon size="0.24rem" name="/icon_home/caogao.png" />草稿箱（0）
                        </div>
                        <div class="draft_right">
                            <van-icon name="arrow" />
                        </div>
                    </div>
                </div>
            </section>
        </van-action-sheet>
    </div>
</template>
<style scoped lang="scss">
#box {
    font-size: 0.14rem;
    // height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #F7F7F7;
    overflow: auto;

    .top_bar_box {
        background-color: white;
        border-bottom: 0.02rem solid #ffb8ad;
        padding-bottom: 0.04rem;
    }

    main {
        padding: 0.1rem;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .login_box {
            // height: 0.5rem;
            padding: 0.12rem 0.14rem;
            margin-bottom: 0.1rem;
            color: #3478F6;
            font-size: 0.12rem;
            background-color: white;
            border-radius: 0.06rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .right_btn {
                display: flex;
                align-items: center;

                .van-button {
                    height: 0.26rem;
                    font-size: 0.12rem;
                    margin-right: 0.12rem;
                }
            }
        }

        .top_news_box {
            // height: 1.3rem;
            padding: 0 0.14rem;
            background-color: white;
            display: flex;
            flex-direction: column;
            margin-bottom: 0.1rem;

            .top_news {
                display: flex;
                flex-direction: column;
                padding: 0.1rem 0;
                border-radius: 0.06rem;

                .top_news_bottom {
                    margin-top: 0.12rem;
                    display: flex;
                    font-size: 0.1rem;

                    .tag {
                        color: red;
                        margin-right: 0.08rem;
                    }

                    .top_news_auther,
                    .top_news_commit,
                    .top_news_time {
                        color: gray;
                        margin-right: 0.08rem;
                    }
                }
            }
        }
    }

    section {
        display: flex;
        flex-direction: column;

        .cancelAddContentBtn {
            display: flex;
            justify-content: center;
            border-bottom: 0.01rem solid #bbb;
            .icon {
                // width: 100%;
                margin-top: 0.1rem;
                height: 0.2rem;
                padding-bottom: 0.1rem;
            }

        }

        .addContent {
            margin-top: 0.1rem;
            padding: 0 0.16rem 0.16rem 0.16rem;

            .add_title {
                display: flex;
                align-items: center;
                font-size: 0.13rem;
                margin-bottom: 0.16rem;

                .van-icon {
                    margin-right: 0.12rem;
                }
            }

            .add {
                display: flex;
                justify-content: space-between;

                .add1 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-sizing: border-box;
                    width: 44%;
                    height: 0.75rem;
                    background: linear-gradient(to bottom right, #FF6A02, #FFCA32);
                    border-top-left-radius: 0.1rem;
                    border-top-right-radius: 0.1rem;
                    padding: 0.1rem 0.14rem;

                    .add_con {
                        width: 56%;

                        .add1_title {
                            color: white;
                            margin-bottom: 0.06rem;
                        }

                        .add1_text {
                            color: rgb(233, 233, 233);
                            font-size: 0.11rem;
                        }
                    }
                }

                .add2 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-sizing: border-box;
                    width: 44%;
                    height: 0.75rem;
                    background: linear-gradient(to bottom right, #347BF6, #33CCFF);
                    border-top-left-radius: 0.1rem;
                    border-top-right-radius: 0.1rem;
                    padding: 0.1rem 0.14rem;

                    .add_con {
                        width: 56%;

                        .add2_title {
                            color: white;
                            margin-bottom: 0.06rem;
                        }

                        .add2_text {
                            color: rgb(233, 233, 233);
                            font-size: 0.11rem;
                        }
                    }
                }
            }

            .add_article_video {
                height: 0.6rem;
                margin-top: 0.16rem;
                display: flex;
                border: 0.01rem solid #ddd;
                border-radius: 0.12rem;
                align-items: center;

                .article {
                    flex: 1;
                    height: 0.36rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 0.13rem;

                    .van-icon {
                        margin-right: 0.08rem;
                    }
                }

                .border {
                    width: 0.01rem;
                    height: 0.36rem;
                    background-color: #ddd;
                }

                .video {
                    flex: 1;
                    height: 0.36rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 0.13rem;

                    .van-icon {
                        margin-right: 0.08rem;
                    }
                }
            }

            .draft{
                height: 0.6rem;
                margin-top: 0.16rem;
                box-sizing: border-box;
                display: flex;
                border: 0.01rem solid #ddd;
                border-radius: 0.12rem;
                justify-content: space-between;
                align-items: center;
                padding: 0 0.5rem;

                .draft_left{
                    display: flex;
                    align-items: center;
                    .van-icon {
                        margin-right: 0.08rem;
                    }
                }
            }
        }
    }
}
</style>